<template>
  <!-- hHh lpR fFf ----hHh lpR fFf-->
  <q-layout class="topo-editor" view="lHh Lpr lff" @mousedown.stop>
    <q-header @mousedown.stop>
      <HmiHeader/>
    </q-header>

    <q-drawer
      v-model="leftDrawer"
      show-if-above
      bordered
      side="left"
      :width="260"
      @mousedown.stop
    >
      <div class="header-container bg-primary">
        <div class="logo-layout">
          <img src="../assets/logo.gif" width="30" height="30"/>
        </div>
        <div class="title-layout text-white">
          物联网平台
        </div>
      </div>
      <HmiToolbox/>
    </q-drawer>

    <q-drawer
      v-model="rightDrawer"
      show-if-above
      bordered
      side="right"
      :width="230"
      @mousedown.stop
    >
      <HmiProperty/>
    </q-drawer>

    <q-page-container>
      <router-view />
    </q-page-container>
  </q-layout>
</template>

<script lang="ts">
import { defineComponent, onMounted } from 'vue';
import HmiProperty from './HmiProperty.vue';
import HmiHeader from 'layouts/HmiHeader.vue';
import HmiToolbox from './HmiToolbox.vue';
import { storeToRefs } from 'pinia';
import { useCommonStore } from 'src/stores/commonStore';

export default defineComponent({
  name: 'MainLayout',
  components: {
    HmiHeader,
    HmiToolbox,
    HmiProperty
  },

  setup () {
    //***************************************************************
    //      store
    //***************************************************************
    const commonStore = useCommonStore();
    let {
      leftDrawer,
      rightDrawer
    } = storeToRefs(commonStore);

    //*********************************************************
    //          初始化
    //*********************************************************
    //初始化
    const init = () => {
      leftDrawer.value = true;
      rightDrawer.value = false;
    }

    //挂载
    onMounted(() => {
      init();
    });

    return {
      leftDrawer,
      rightDrawer
    };
  }
});
</script>

<style lang="scss" scoped>
.header-container {
  display: flex;
  margin: 0px;
  padding: 0px;
  height: 50px;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;

  .logo-layout {
    height: 40px;
    width: 40px;
    margin-top: 5px;
    margin-left: 10px;
  }
  .title-layout {
    font-size: 18px;
    font-weight: normal;
  }
}

</style>

